<template>
    <div class="orders-list">
        <div class="orders-list-card">
            <div class="orders-list-head">
                <Row :gutter="5" style="margin-bottom: 10px">
                    <!--<Col span="4">-->
                        <!--<DatePicker  clearable v-model="searchData.timeStartEnd" style="width: 100%" type="daterange" placeholder="时间筛选"></DatePicker>-->
                    <!--</Col>-->
                    <Col span="4">
                        <Input clearable v-model="searchData.orderNum" placeholder="订单号" type="text"></Input>
                    </Col>
                    <!--<Col span="4">-->
                        <!--<Input clearable v-model="searchData.shopName" placeholder="店铺名" type="text"></Input>-->
                    <!--</Col>-->
                    <!--<Col span="4">-->
                        <!--<Input clearable v-model="searchData.shopId" placeholder="店铺Id" type="text"></Input>-->
                    <!--</Col>-->
                    <!--<Col span="4">-->
                        <!--<Input clearable v-model="searchData.userName" placeholder="收货人姓名" type="text"></Input>-->
                    <!--</Col>-->
                    <!--<Col span="4">-->
                        <!--<Input clearable v-model="searchData.userPhone" placeholder="收货人电话" type="text"></Input>-->
                    <!--</Col>-->
                <!--</Row>-->
                <!--<Row :gutter="5">-->
                    <!--<Col span="4">-->
                        <!--<Select clearable v-model="searchData.areaId1" placeholder="选择地址(省)" @on-change="getAreaId2">-->
                            <!--<Option v-for="(value,key) in areaId1List" :value="value.areaid">{{value.areaname}}</Option>-->
                        <!--</Select>-->
                    <!--</Col>-->
                    <!--<Col span="4">-->
                        <!--<Select clearable v-model="searchData.areaId2" placeholder="选择地址(市)" @on-change="getAreaId3">-->
                            <!--<Option v-for="(value,key) in areaId2List" :value="value.areaid">{{value.areaname}}</Option>-->
                        <!--</Select>-->
                    <!--</Col>-->
                    <!--<Col span="4">-->
                        <!--<Select clearable v-model="searchData.areaId3" placeholder="选择地址(县、区)">-->
                            <!--<Option v-for="(value,key) in areaId3List" :value="value.areaid">{{value.areaname}}</Option>-->
                        <!--</Select>-->
                    <!--</Col>-->
                    <!--<Col span="4">-->
                        <!--<Select clearable v-model="searchData.orderStatus" placeholder="订单状态">-->
                            <!--<Option :value="0">代发货</Option>-->
                            <!--<Option :value="1">已受理</Option>-->
                            <!--<Option :value="2">打包中</Option>-->
                            <!--<Option :value="3">配送中</Option>-->
                            <!--<Option :value="4">已收货</Option>-->
                            <!--<Option :value="5">已完成</Option>-->
                            <!--<Option :value="-1">已取消</Option>-->
                            <!--<Option :value="-2">待支付</Option>-->
                            <!--<Option :value="-3">订单取消</Option>-->
                            <!--<Option :value="-4">退款成功</Option>-->
                            <!--<Option :value="-5">退款驳回</Option>-->
                            <!--<Option :value="-6">未受理</Option>-->
                            <!--<Option :value="-7">未受理</Option>-->
                        <!--</Select>-->
                    <!--</Col>-->
                    <!--<Col span="3">-->
                        <!--<Select clearable v-model="searchData.payFrom" placeholder="支付方式">-->
                            <!--<Option :value="1">微信</Option>-->
                            <!--<Option :value="2">支付宝</Option>-->
                        <!--</Select>-->
                    <!--</Col>-->
                    <!--<Col span="3">-->
                        <!--<Input clearable v-model="searchData.uphone" placeholder="登录手机" type="text"></Input>-->
                    <!--</Col>-->
                    <Col span="2">
                        <Button :loading="search_loading" @click="searchGetList" class="subSearch" type="primary"><Icon type="ios-pulse-strong"></Icon> 筛 选</Button>
                    </Col>
                </Row>
            </div>
            <i-table height="645" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
        <Modal v-model="modal3" width="360">
            <p slot="header" style="text-align:center">
                <a>订单详情</a>
            </p>
            <!--<Form   ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="70" style="margin-top: 20px">-->
            <Form v-for="(ice,index) in icecream" :key="index" style="margin-top: 20px" :label-width="70">
                <FormItem label="用户编号">
                    <Input v-model="ice.username" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="手机号">
                    <Input v-model="ice.phone" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="订单编号">
                    <Input v-model="ice.order_no" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="总金额">
                    <Input v-model="ice.order_money" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="添加时间">
                    <Input v-model="create_time" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="商品">
                    <Input v-model="ice.goods.name" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="数量">
                    <Input v-model="ice.goods.num" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="收货人">
                    <Input v-model="ice.name" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="收货人电话">
                    <Input v-model="ice.phone" placeholder="" readonly></Input>
                </FormItem>



            </Form>
            <div slot="footer">
            <Button type="error" size="large" long  @click="shownow">确认</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        name:"orders-list",
        data(){
            return{

                columns:[
                    {
                        type: 'expand',
                        width: 30,
                        render: (h, params) => {
                            return h("span",`收货地址: ${params.row.aareaname} ${params.row.bareaname} ${params.row.careaname} ${params.row.useraddress}`)
                        }
                    },
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align:"center",
                    },
                    {
                        title: '订单号',
                        key: 'order_no',
                        align:"center",
                    },
                    // {
                    //     title: '商品',
                    //     align:"center",
                    //     width:180,
                    //     key: 'goods',
                    //     render:(h,params)=>{
                    //         return h("Row",{
                    //             props:{
                    //                 gutter:5,
                    //                 type:"flex",
                    //                 justify:"center"
                    //             }
                    //         },
                    //             params.row.goods.map((value,key,arr)=>{
                    //                 return h("Col",
                    //                     {
                    //                         props:{
                    //                            span:8,
                    //                         },
                    //                         style:{
                    //                             cursor:"pointer",
                    //                             position:"static"
                    //                         }
                    //                     },
                    //                     [
                    //                         h("Tooltip",{
                    //                             props:{
                    //                                 placement:"top",
                    //                             }
                    //                         },[
                    //                             h("img",
                    //                              {
                    //                                  attrs:{
                    //                                      src:value.goodsthums
                    //                                  },
                    //                                  on:{
                    //                                      mouseover:(e)=>{
                    //                                          this.$store.commit("setImgData",{
                    //                                              src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                    //                                              x:e.x+60+"px",
                    //                                              y:e.y-10+"px",
                    //                                          })
                    //                                      },
                    //                                      mousemove:(e)=>{
                    //                                          this.$store.commit("setImgData",{
                    //                                              src:e.target.src||e.target.getElementsByTagName("img")[0].src||"",
                    //                                              x:e.x+60+"px",
                    //                                              y:e.y-10+"px",
                    //                                          })
                    //                                      },
                    //                                      mouseout:(e)=>{
                    //                                          this.$store.commit("setImgData",{
                    //                                              src:"",
                    //                                              x:"0px",
                    //                                              y:"0px",
                    //                                          })
                    //                                      }
                    //                                  },
                    //                                  style:{
                    //                                      width:"42px",
                    //                                      height:"42px",
                    //                                      borderRadius:"4px",
                    //                                      display:"block",
                    //                                      position:"relative",
                    //                                      top:"3px",
                    //                                  },
                    //                              }),
                    //                             h("div",{
                    //                                 slot:"content",
                    //                                 style:{
                    //                                     fontSize: "15px",
                    //                                 }
                    //                             },[
                    //                                 h("p",{style:{marginBottom:"10px"}},"商品名称: "+value.goodsname),
                    //                                 h("p",{style:{marginBottom:"10px"}},"商品属性: "+value.goodsattrname),
                    //                                 h("p",{style:{marginBottom:"10px"}},"商品价格: ￥"+value.goodsprice),
                    //                                 h("p","购买数量: "+value.goodsnums),
                    //                             ])
                    //                         ]),
                    //                 ])
                    //             })
                    //         )
                    //     }
                    // },
                    {
                        title: '用户编号',
                        key: 'username',
                        align:"center",
                    },
                    {
                        title: '总金额',
                        key: 'order_money',
                        align:"center",
                    },
                    // {
                    //     title: '订单价格',
                    //     key: 'totalmoney',
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         return `￥ ${params.row.totalmoney}`
                    //     }
                    // },
                    // {
                    //     title: '支付方式',
                    //     key: 'payfrom',
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         return params.row.payfrom==="1"?"微信":"支付宝"
                    //     }
                    // },
                    // {
                    //     title: '收货人姓名、电话',
                    //     key: 'username',
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         return `${params.row.username} ${params.row.userphone}`
                    //     }
                    // },
                    // {
                    //     title: '运费',
                    //     key: 'username',
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         return `￥ ${params.row.delivermoney}`
                    //     }
                    // },
                    {
                        title: '添加时间',
                        key: 'create_time',
                        align:"center",
                        render:(h,params)=>{
                            return `${this.timeFormat(params.row.create_time)}`
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: 250,
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                // h('Button', {
                                //     props: {
                                //         type: 'warning',
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.tiao(params.index)
                                //         }
                                //     }
                                // },"修改"),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看详情'),
                                // h('Button', {
                                //     props: {
                                //         type: 'error',
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.remove(params.index)
                                //         }
                                //     }
                                // }, '删除')
                            ]);
                        }
                    },
                ],
                data:[],
                icecream:[],
                total:0,
                index:1,
                page_con:15,
                modal3:false,
                creat_time:'',
                searchData:{
                    timeStartEnd:[],//两个时间内的赛选
                    orderNum:"",//订单号
                    shopName:"",//店铺名
                    shopId:"",//店铺ID
                    userName:"",//收货人姓名
                    userPhone:"",//收货人电话
                    areaId1:"",//省
                    areaId2:"",//市
                    areaId3:"",//县
                    orderStatus:"",//订单状态
                    payFrom:"",//支付方式
                    uphone:"",//登录手机号
                },
                search_loading:false,
                areaId1List:[],//省级
                areaId2List:[],//市级
                areaId3List:[],//县
            }
        },
        activated(){
            this.getOrderList()
            // this.getAreaId1()
        },
        methods:{
            getOrderList(){
                this.getJsonData("ProjectOrders/index",{
                    // num:this.page_con,
                    // page:this.index,
                    // begin:this.searchData.timeStartEnd[0]?this.searchData.timeStartEnd[0]/1000:"",
                    // last:this.searchData.timeStartEnd[1]?this.searchData.timeStartEnd[1]/1000:"",
                    order_no:this.searchData.orderNum,
                    // shopName:this.searchData.shopName,
                    // shopId:this.searchData.shopId,
                    // userName:this.searchData.userName,
                    // userPhone:this.searchData.userPhone,
                    // areaId1:this.searchData.areaId1,
                    // areaId2:this.searchData.areaId2,
                    // areaId3:this.searchData.areaId3,
                    // orderStatus:this.searchData.orderStatus,
                    // payFrom:this.searchData.payFrom,
                    // uphone:this.searchData.uphone,
                },true)
                    .then((res)=>{
                        this.data=res.orders
                        this.total=parseInt(res.count)
                        this.search_loading=false
                    })
                    .catch((res)=>{
                        this.search_loading=false
                    })
            },
            //获取省
            getAreaId1(){
                this.getJsonData("Areas/getAreas",{parentId:""})
                    .then((res)=>{
                        this.areaId1List = res.data
                    })
            },
            //获取市
            getAreaId2(){
                if(this.searchData.areaId1!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.searchData.areaId1})
                        .then((res)=>{
                            this.areaId2List = res.data
                        })
                }else{
                    this.areaId2List = []
                    this.areaId3List = []
                }
            },
            //获取县
            getAreaId3(){
                if(this.searchData.areaId2!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.searchData.areaId2})
                        .then((res)=>{
                            this.areaId3List = res.data
                        })
                }else{
                    this.areaId3List = []
                }
            },
            changePage(n){
                this.index=n
                this.getOrderList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getOrderList()
            },
            searchGetList(){
                this.search_loading=true
                this.index=1
                this.getOrderList()
            },
            show(n){
                this.doIndex=n
                this.getJsonData("ProjectOrders/index",{id:this.data[this.doIndex].id,},true)
                    .then((res)=>{
                        this.icecream = res.orders
                        this.create_time = `${this.timeFormat(res.orders[0].create_time)}`
                    })
                this.modal3=true
            },
            shownow(){
                this.modal3 = false;
                // this.modal_loading = true;
                // this.getJsonData("AdminUser/runUpdateAdminUser",{id:this.data[this.doIndex].id,pwd:this.password},true)
                //     .then((res)=>{
                //         this.getArticleList()
                //         this.modal_loading = false;
                //         this.modal3 = false;
                //         this.$Message.success('修改成功');
                //     }).catch((res)=>{
                //     this.modal_loading = false;
                //     this.modal3 = false;
                // })
            },
        },
    }
</script>
<style lang="less">
    @import "./orders-list";
</style>